<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<div id="formbody" class="formbody">
    <div class="itab">
        <ul>
            <li><a href="#tab1">主导航</a></li>
        </ul>
    </div>    
    <div id="tab1" class="tabson"></div>
</div>

<!-- 模板 -->
<script id="list_tab1" type="text/html">
    <table class="tablelist">
        <thead>
        <tr>
        <th style="width:8%">编号</th>
        <th style="width:12%">导航名称</th>
        <th style="width:12%">英文名称</th>
        <th>链接地址</th>
        <th style="width:8%">排序</th>
        <th style="width:8%">子菜单</th>
        <th style="width:10%">链接方式</th>
        <th style="width:8%">启用</th>
        <th style="width:10%">操作</th>
        </tr>
        </thead>
        <tbody>
        <%for(i = 0; i < list.length; i ++) {%>
            <tr <%=#(i%2 ==0) ?'':'class="odd"'%> data-id="<%=list[i].id%>">
            <td><%=list[i].id%></td>
            <td><%=list[i].title%></td>
            <td><%=list[i].subtitle%></td>
            <td><%=list[i].uri%></td>
            <td><%=Number(list[i].sort)%></td>
            <td><%=list[i].sub_id?list[i].sub_id:'-'%></td>
            <td><%=#list[i].target?'<i>弹出窗口</i>':'当前窗口'%></td>
            <td><%=#list[i].enable?'是':'<i>否</i>'%></td>
            <td>
                <a class="tablelink act_edit">编辑</a>
                <a class="tablelink act_delete">删除</a>
            </td>
            </tr>
        <%}%>        
        </tbody>
    </table>  
    <div class="pagin">
        <div class="message">共<i class="blue"><%=record_count%></i>条记录，当前显示第&nbsp;<i class="blue"><%=page_num%>/<%=page_count%></i>&nbsp;页</div>
        <div class="paginList" id="page_bar_tab1"></div>
    </div>
    <div class="clearfloat"></div>
</script>
<script id="edit_tab1" type="text/html">
<form action="<?php echo site_url('ajax/links_handle/modify');?>" method="POST">  
<div class="formtitle"><span><%=id?'编辑':'添加'%>导航</span></div> 
<input name="id" type="hidden" value="<%=id?id:0%>" />
<input name="gid" type="hidden" value="<%=group%>" />
<ul class="forminfo">
    <li><label>导航名称<b>*</b></label><input name="title" value="<%=title%>" type="text" class="dfinput" /></li>
    <li><label>英文名称</label><input name="subtitle" value="<%=subtitle%>" type="text" class="dfinput" /></li>
    <li><label>链接地址<b>*</b></label><input name="uri" value="<%=uri%>" type="text" class="dfinput" /><i>例如：home/xxxx，后面没有.html，支持外部链接，外部链接必须以http或者https开头</i></li>
    <li><label>高亮地址</label><input name="selected_uri" value="<%=selected_uri%>" type="text" class="dfinput" /><i>当访问这些地址时，导航项高亮。多个地址用半角竖线（|）分割</i></li>
    <li><label>排序</label><input name="sort" value="<%=Number(sort)%>" type="text" class="dfinput" /><i>数值大的在前，数值小的在后</i></li>
    <li><label>子菜单</label><input name="sub_id" value="<%=sub_id%>" type="text" class="dfinput" /><i>填入分类ID（编号）</i></li>
    <li><label>链接方式</label><cite><input id="target_no" name="target" type="radio" value="0"  <%=target?'':'checked="checked"'%>/><label for="target_no">当前窗口</label><input id="target_yes" name="target" type="radio" value="1" <%=target?'checked="checked"':''%>/><label for="target_yes">弹出窗口</label></cite></li>
    <li><label>是否启用</label><cite><input id="enable_yes" name="enable" type="radio" value="1" <%=enable?'checked="checked"':''%>/><label for="enable_yes">是</label><input id="enable_no" name="enable" type="radio" value="0"  <%=enable?'':'checked="checked"'%>/><label for="enable_no">否</label></cite></li>
    <li><label>&nbsp;</label><input type="submit" class="btn" value="确认保存"/><input type="button" class="btn btn_cancle" value="取消"/></li>
</ul>
</form>
</script>

<!-- 脚本 -->
<script src="js/template-helper.js" type="text/javascript"></script>
<script type="text/javascript">
function get_page(){
	$('.btn_add').show();
	$('.btn_back').hide();
	$.getJSON(
        '<?php echo site_url('ajax/links_handle/get_list');?>',
        {
              begin: (current_status.page_num - 1) * current_status.page_size,
              length: current_status.page_size,
              gid: current_status.group
          },
          function(rs){
              if(rs.err===0){
                current_status.page_count = Math.ceil(rs.data.record_count/current_status.page_size);
                //呈现内容
                $('#'+current_status.tab).html(template('list_'+current_status.tab, $.extend({},current_status,rs.data)));
                //显示分页
                laypage({
                    cont: 'page_bar_'+current_status.tab, //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
                    pages: current_status.page_count, //通过后台拿到的总页数
                    curr: current_status.page_num, //当前页
                    jump: function(obj, is_self){ //触发分页后的回调
                        if(!is_self){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            current_status.page_num = obj.curr;
                            get_page();
                        }
                    }
                });
              }else if(rs.err===4){
                  //数据实际页数减少，但前端没有刷新，仍旧请求不存在的页码，返回的是“列表为空”的错误
                  current_status.page_num --;
                  get_page();
              }else{
                  layer.msg(rs.msg, {icon:2,time:2000});
              }            
        }
    );
};
//添加
$('.btn_add').on('click', function(){
	$(this).hide();
	$('.btn_back').show();
	$('#'+current_status.tab).html(template('edit_'+current_status.tab, $.extend({target:false,sort:0,enable:true},current_status)));
	$('.imgshow .infobox').hover(function(){
		$(this).find('a').show();
    },function(){
    	$(this).find('a').hide();
    });
	$('.imgshow a').on('click', function(){
        $(this).parent().siblings('input').val('');
	    infoshow($(this).parent().parent());
	});
});
//返回列表
$('.btn_back').on('click', function(){
	get_page();
});
//取消
$('#formbody').on('click', '.btn_cancle', function(){
	get_page();
});
//删除
$('#formbody').on('click', '.act_delete',function(){
    var id = $(this).parent().parent().attr('data-id');
    $.post(
            '<?php echo site_url('ajax/links_handle/modify');?>',
            {
                  id:id,
                  deleted:1
            },
            function(rs){
                if(rs.err===0){
                    layer.msg('删除成功！', {icon:1,time:2000});    
                    get_page();
                }else{
                    layer.msg(rs.msg, {icon:2,time:2000});
                }
            },
            'json'
    );
});
//编辑
$('#formbody').on('click', '.act_edit', function(){
	var id = $(this).parent().parent().attr('data-id');    
	$('.btn_add').hide();
	$('.btn_back').show();
	$.getJSON(
            '<?php echo site_url('ajax/links_handle/get');?>',
            {
                id:id
            },
            function(rs){
                if(rs.err===0){
                	$('#'+current_status.tab).html(template('edit_'+current_status.tab, $.extend({},current_status,rs.data)));
	            	$('.imgshow .infobox').hover(function(){
	            		$(this).find('a').show();
		            },function(){
		            	$(this).find('a').hide();
		            });
	            	$('.imgshow a').on('click', function(){
		                $(this).parent().siblings('input').val('');
	            	    infoshow($(this).parent().parent());
	            	});
	            	$('.imgshow').each(function(){
	            		infoshow($(this));
	            	});  
                }else{
                    layer.msg(rs.msg, {icon:2,time:2000});
                }
            }
    );	
});
//保存
$('#formbody').on('submit','form', function(e) {
    e.preventDefault();
	var this_btn = $(this);
    if(!this_btn.attr('disabled')){
    	this_btn.attr('disabled',true);
    }else{
        return;
    }
    $(this).ajaxSubmit({
    	dataType:'json',
    	success:function(rs){
    		if(rs.err===0){
                layer.msg('保存成功！', {icon:1,time:2000}, function(){
                	get_page();
                });
            }else{
                layer.msg(rs.msg, {icon:2,time:2000}, function(){
                	this_btn.attr('disabled',false);
                });
            }
		}
    });
});
$("#formbody").on('change', '#up_img_cover', function(){
	$.ajaxFileUpload({
	    url:'<?php echo site_url('ajax/upload_handle/image');?>',
	    fileElementId:'up_img_cover',
	    dataType: 'json',
	    success: function(rs,status){
	        if(rs.err===0){
		        $('#img_cover input').val(rs.data.save);
		        infoshow($('#img_cover'));
	        }else{
	        	layer.msg(rs.msg, {icon:2,time:2000});
	        }
	    }
	});
});
function infoshow($el){
	var src = $el.find('input').val();
	if(src){
		$el.find('img').attr('src','<?php echo up_path();?>' + src);
		$el.find('.infobox').show();
	}else{
		$el.find('.infobox').hide();
	}
}

var group = {'tab1':0,'tab2':1,'tab3':2,'tab4':3,'tab5':4};
var current_status = { page_num:1, page_size:20, page_count:1 };
current_status.tab = window.location.hash?window.location.hash.substring(1).replace('t','tab'):'tab1';

$("#formbody .itab ul").idTabs({
	start:current_status.tab,
	click:function(tab){
		current_status.tab = tab.substring(1);
		current_status.group = group[current_status.tab];
		window.location.hash = current_status.tab.replace('tab','t');
		current_status.page_num = 1;
		$('#'+current_status.tab).html('');
		get_page();		
		return true;
	}
});
</script>
    